<template>
  <div class="div">
    <a-row class="top_font">
      <a-col span="5" class="">
        <a-input addon-before="用户账号：" v-model="search.username"/>
      </a-col>
      <a-col span="5">
        <a-input style="margin-left: 16px" addon-before="修改日期：" v-model="search.updateTime"/>
      </a-col>
      <a-col span="5">
        <a-input style="margin-left: 32px" addon-before="修改人：" v-model="search.updateName"/>
      </a-col>
      <a-col span="1">
        <a-button
          style="margin-left: 64px"
          icon="search"
          type="primary"
          htmlType="submit"
          @click="searchList()"
        >查询</a-button>
      </a-col>
    </a-row>
    <a-row class="center_margin">
      <a-col span="5">
        <a-input addon-before="编号：" v-model="search.id"/>
      </a-col>
      <a-col span="5">
        <a-input style="margin-left: 16px" addon-before="角色：" v-model="search.roleName"/>
      </a-col>
      <a-col span="5">
        <a-input style="margin-left: 32px" addon-before="状态：" v-model="search.state"/>
      </a-col>
      <a-col span="1">
        <a-button
          icon="sync"
          style="margin-left: 64px"
          @click="reset()"
        >重置</a-button>
      </a-col>
    </a-row>
    <a-row class="bottom_font">
      <a-col class="title" span="3">
        编号
      </a-col>
      <a-col class="title" span="3">
        修改人
      </a-col>
      <a-col class="title" span="3">
        状态
      </a-col>
      <a-col class="title" span="3">
        用户账号
      </a-col>
      <a-col class="title" span="3">
        角色
      </a-col>
      <a-col class="title" span="3">
        修改日期
      </a-col>
      <a-col class="title" span="6">
        操作
      </a-col>
    </a-row>
    <a-list :data-source="dataList" :pagination="{onChange: (current, size) => {this.num = current, this.searchViews?this.searchInfo():this.getAll()}, showQuickJumper: true, pageSize: 15, total: totalList}">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-col class="numb" span="3">
          {{ item.id }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.updateName }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.state }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.username }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.roleName }}
        </a-col>
        <a-col class="numb" span="3">
          {{ item.updateTime }}
        </a-col>
        <a-col class="numb" span="6">
          <a-button @click="edit(index)" type="link" size="small" class="operate_change">编辑</a-button>
          <a-button @click="del(index)" type="link" size="small" class="operate_change">删除</a-button>
          <a-button @click="dis(index)" type="link" size="small" class="operate_change">禁用</a-button>
        </a-col>
      </a-list-item>
    </a-list>
    <a-modal
      title="信息修改"
      style="top: 20px;"
      :width="800"
      v-model="editinfo"
      @ok="handleOk()"
    >
      <a-form class="permission-form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="用户账号" hasFeedback>
          <a-input :disabled="true" v-model="userId"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="拥有角色" hasFeedback>
          <a-dropdown>
            <a-menu slot="overlay">
              <template v-for="(item, current) in roles" >
                <a-menu-item :key="current" @click="handleMenuClick(index)">{{ item.roleName }} </a-menu-item>
              </template>
            </a-menu>
            <a-button style="margin-left: 8px"> {{ checkRole }} <a-icon type="down" /> </a-button>
          </a-dropdown>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { delUserRole, searchUserRole, updateUserRole, getAllRole, disUserRole, getAllUserRole } from '@/api/manage'
export default {
  data () {
        return {
            dataList: [],
            editinfo: false,
            searchViews: false,
            userId: '',
            userRole: '',
            roles: '',
            checkRole: '',
            totalList: 0,
            num: 1,
            search: { pageNum: 1, pageSize: 15, username: '', updateTime: '', updateName: '', id: '', roleName: '', state: '' },
            labelCol: {
              xs: { span: 24 },
              sm: { span: 5 }
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 }
            }
        }
    },
  created () {
    this.getAll()
    this.getAllRoles()
  },
  methods: {
    searchList () {
      this.searchViews = true
      this.num = 1
      this.searchInfo()
    },
    searchInfo () {
      this.$set(this.search, 'pageNum', this.num)
      searchUserRole(this.search).then((res) => {
        this.dataList = res.datalist
        this.totalList = Number(res.total)
        // console.log(res)
        // console.log(this.data)
      })
    },
    reset () {
      this.$set(this.search, 'pageNum', this.num)
      this.$set(this.search, 'username', '')
      this.$set(this.search, 'updateTime', '')
      this.$set(this.search, 'id', '')
      this.$set(this.search, 'roleName', '')
      this.$set(this.search, 'state', '')
      this.num = 1
      if (this.searchViews) {
        this.getAll()
      }
      this.searchViews = false
    },
    handleOk () {
      this.editinfo = false
      const update = { roleId: this.roleId, id: this.userId }
      updateUserRole(update).then((res) => {
        // console.log('success')
        // console.log(this.roles[this.index].roleName)
        this.roles[this.index].roleName = this.checkRole
        // console.log(this.roles[this.index].roleName)
        // console.log(this.checkRole)
      })
    },
    handleMenuClick (index) {
      // console.log(index)
      this.checkRole = this.roles[index].roleName
      this.roleId = this.roles[index].id
    },
    getAllRoles () {
      const Role = {}
      getAllRole(Role).then((res) => {
        this.roles = res.datalist
        // console.log(res)
      })
    },
    getAll () {
      var that = this
      const pageBase = { content: '', pageNum: this.num, pageSize: 15 }
      getAllUserRole(pageBase).then((res) => {
        // console.log(res)
        that.dataList = res.datalist
        that.totalList = Number(res.total)
        // console.log(this.dataList[0].id)
      })
    },
    del (index) {
      // console.log('删除')
      const Id = { id: this.dataList[index].id }
      delUserRole(Id).then((res) => {
        // console.log('success')
      })
    },
    edit (index) {
      this.userId = this.dataList[index].id
      this.checkRole = this.dataList[index].roleName
      this.editinfo = true
      // console.log(this.dataList[0].id)
      // console.log('编辑')
    },
    dis (index) {
      // console.log('禁用')
      const id = { id: this.data[index].id }
      disUserRole(id).then((res) => {
        // console.log('success')
      })
    }
  }
}
</script>

<style scoped>
.title{
  text-align: center;
}
.div{
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
}
.inputround{
    border-radius: 25px;
    border-width: 1pX;
    width: 50%;
}
.top_font{
    text-align: right;
    font-size: small;
}
.center_margin{
    text-align: right;
    margin-top: 10px;
    font-size: small;
}
.img{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-left: 64px
}
.bottom_font{
    text-align: center;
    font-size: larger;
    margin-top: 10px;
    background-color: rgba(241, 247, 247, 0.979);

}
.numb{
  text-align: center;
  word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.operate_change{
    color: chartreuse;
}
</style>
